<template>
  <div class="structure">
      <div class="vue2">
        <h1>vue2.x结构</h1>
        <pre class="code">
  data() {
    return: {}
  },
  computed: {},
  watch: {},
  props: {},
  beforeCreate(){
    // 创建前
  },
  created(){
    // 创建
  },
  beforeMount(){
    // dom挂载前
  },
  mounted(){
    // 挂载
  },
  beforeUpdate(){
    // 更新前
  },
  updated(){
    // 更新
  },
  activated(){
    // keep-allive活动时
  },
  deactivated(){
    // keep-allive停止时
  },
  beforeDestroy(){
    // 卸载前
  },
  destroyed(){
    // 卸载
  }
        </pre>
      </div>
      <div class="vue3">
        <h1>vue3.x结构</h1>
        <pre class="code">
&lt;script&gt;
  export default {
    setup() {
      
    },
    data() {
      return: {}
    },
    computed: {},
    watch: {},
    props: {},
    beforeCreate(){
      // 创建前
    },
    created(){
      // 创建
    },
    beforeMount(){
      // dom挂载前
    },
    mounted(){
      // 挂载
    },
    beforeUpdate(){
      // 更新前
    },
    updated(){
      // 更新
    },
    activated(){
      // keep-allive活动时
    },
    deactivated(){
      // keep-allive停止时
    },
    beforeDestroy(){
      // 卸载前
    },
    destroyed(){
      // 卸载
    }
  }
&lt;/script&gt;
        </pre>
      </div>

  </div>

</template>

<script lang="ts">
export default {
  name: 'Structure'

}
</script>

<style lang="less" scoped>
  .structure {
    padding: 20px;
    height: calc(100vh - 68px);
    display: flex;
    .vue2 {
      flex: 1;
      height: calc(100vh - 68px - 44px);
      overflow-y: scroll;
    }
    .vue3 {
      flex: 1;
      margin-left: 10px;
      height: calc(100vh - 68px - 44px);
      overflow-y: scroll;
    }
  }
  .code {
    color: #fff;
    background: #000;
    font-weight: 800;
  }
</style>